<template>
  <base-breadcrumb>
    <searchData
      :search-data="searchArr"
      @search="search"
    />
    <a-card>
      <!-- <title-name title="会议室管理" /> -->
      <!-- <div class="table-operator">
        
      </div> -->
      <a-spin :spinning="spinning">
        <list-table
          ref="table"
          row-key="id"
          :columns="columns"
          :request="loadData"
          :alert="true"
          show-size-changer
          show-quick-jumper
        >
        <a-button
          slot="prefix"
          slot-scope="ref"
          v-btnPermission="'oa_006_add_01'"
          type="primary"
          @click="handleUpdate('add', {})"
        >
          新增会议室
        </a-button>
          <span
            slot="serial"
            slot-scope="text, record, index"
          >{{ index + 1 }}</span>
          <template
            slot="status"
            slot-scope="text, record"
          >
            <span :style="text ? {} : {color: '#F60909'}">
              {{ text ? '可用' : '不可用' }}
            </span>
          </template>
          <template
            slot="equipmentType"
            slot-scope="text, record, index"
          >
            {{ fileEquipmentType(text) }}
          </template>
          <template
            slot="picture"
            slot-scope="text, record, index"
          >
            <!-- {{ text }} -->
            <img
              v-if="text"
              style="width: 50px;"
              :src="'/api/ycloud-file-center/oper/download?access_token=' + token + '&fileId=' + text.fileId"
            >
            <span v-else />
          </template>
          <span
            slot="tsOperation"
            slot-scope="text, record"
          >
            <!-- 
                    只有会议室管理部门可查看并编辑此功能，其他部门，包括领导班子不显示该标签栏
                    -->
            <span>
              <a @click="handleUpdate('look', record)">查看</a>
            </span>
            <span v-btnPermission="'oa_006_edi_02'">
              <a-divider type="vertical" />
              <a @click="handleUpdate('edit', record)">编辑</a>
            </span>
          </span>
        </list-table>
      </a-spin>
    </a-card>
        
    <!-- add modal start -->
    <AddConferenceRoom
      :visible="addModalVisible"
      :form-data="formData"
      :modal-type="modalType"
      @cancelSub="hideAddModal"
      @submitForm="showAddModal"
    />
    <!-- add modal end -->
  </base-breadcrumb>
</template>
<script>
import Vue from 'vue'
// import { STable } from '@/components'
import AddConferenceRoom from './modalForm.vue'
import { getMeetingRoomList } from '@/api/office/anualConference/index'
import anualConBase from './baseconfig.js'
export default {
  name:'a'+Date.now(),
    components: {
        // STable,
        AddConferenceRoom
    },
    data() {
        this.columns = anualConBase.columns
        this.searchArr = anualConBase.searchArr
        return {
            queryParam: {},
            addModalVisible: false,
            modalType: 'add',
            first: true,
            formData: {},
            spinning: false,
            loadData: async (parameter) => {
              this.queryParam.query = {
                  unitId: this.$currentPost().id,
                  ...this.queryParam.query 
              }
              const requestParameters = Object.assign({}, parameter, this.queryParam)

              return getMeetingRoomList(requestParameters).then(res => {
                return res
              })
                // try {
                //   this.queryParam.query = {
                //       unitId: this.$currentPost().id,
                //       ...this.queryParam.query 
                //   }
                //   const requestParameters = Object.assign({}, parameter, this.queryParam)
                //   this.spinning = true;
                //   const res = await getMeetingRoomList(requestParameters)
                //   this.spinning = false;
                //   // this.statisticsInfo.totalNum = res.totalSize
                //   return Promise.resolve({
                //     data: res.data || [],
                //     currentPage: res.currentPage || parameter.pageNo,
                //     totalSize: res.totalSize || 0,
                //   })
                // } catch (e) {
                //   this.spinning = false;
                //   return Promise.reject(e)
                // }
            },
        }
    },
    created() {
    },
    computed: {
      token() {
        return Vue.getAcloudProvider().getAccessToken()
      }
    },
    methods: {
        fileEquipmentType(Arr) {
          let arr = Arr.map((item, index) => {
            return item.name
          })
          return arr.join('、')
        },
        //搜索
        search(val = {}) {
            this.queryParam.query = {
                ...val
            }

            this.$refs.table.refresh(true)
        },

        // 处理更新操作（新增、编辑）
        async handleUpdate(type, data = {}) {
          this.formData = data;
          this.modalType = type;
          this.showAddModal()
        },
        showAddModal() {
          this.addModalVisible = true;
        },
        hideAddModal(reset) {
          this.addModalVisible = false;
          reset && this.$refs.table.refresh(true)
        },

    },
}
</script>
<style>
  .flex-model-form .ant-form-item{
    display: flex;
  }
  .ant-select-dropdown-menu {
    text-align: left;
  }
</style>
